<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="8">
            <p>头条标题</p>
            <p>{{ item.tittle }}</p>
          </el-col>
          <el-col :span="8">
            <p>头条摘要</p>
            <p>{{ item.summary }}</p>
          </el-col>
          <el-col :span="8">
            <p>直播状态</p>
            <p>{{ item.status ?"已发布" :'未发布' }}</p>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="jumpId">编 辑</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20" v-html="item.dto.content"></div>
  </div>
</template>
<script>
export default {
  props: ["id", "pageHeight", "updateRight", "accreditChildren"],
  data() {
    return {
      item: {},
      showInfo: false
    };
  },
  mounted() {
    this.getInitData();
  },
  methods: {
    getInitData() {
      this.$post({
        url: "/infomanage/informations/getInformationDetails",
        data: {
          id: this.$props.id
        }
      }).then(res => {
        this.$nextTick(() => {
          this.$refs["info"].style.height = this.$props.pageHeight + "px";
        });
        this.item = res.item;
        this.showInfo = true;
      });
    },
    clearJumpId() {
      this.$emit("clearJumpId");
    },
    jumpId() {
      this.$emit("editor");
    }
  }
};
</script>

<style lang='scss'>
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
img {
  vertical-align: top;
  max-width: 480;
  max-height: 360px;
}
</style>
